<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            a{display: block;width:100%;height:50px;color:#fff;background: #cccccc;text-align: center;font-size: 32px;line-height: 50px;text-decoration: none;}
            img{vertical-align: top;width: 800px;height:450px; } 
            div{width:100px;height: 400px;position:fixed;top:50%;right:10px;margin-top: -200px;display: none;border:1px #000 solid;}
            div a:hover{background: #6633ff;}
        </style>
    </head>
    <body>
        <a id="1f" name="1f">1f</a>
        <img src="img/1.jpg" alt="">
        <a id="2f" name="2f">2f</a>
        <img src="img/2.jpg" alt="">
        <a id="3f" name="3f">3f</a>
        <img src="img/3.jpg" alt="">
        <a id="4f" name="4f">4f</a>
        <img src="img/4.jpg" alt="">
        <a id="5f" name="5f">5f</a>
        <img src="img/5.jpg" alt="">
        <a id="6f" name="6f">6f</a>
        <img src="img/6.jpg" alt="">
        <a id="7f" name="7f">7f</a>
        <img src="img/7.jpg" alt="">
        <a id="8f" name="1f">8f</a>
        <img src="img/8.jpg" alt="">
        <div>
<!--            <a href="#2f">2f</a>
            <a href="#3f">3f</a>
            <a href="#4f">4f</a>
            <a href="#5f">5f</a>
            <a href="#6f">6f</a>
            <a href="#7f">7f</a>
            <a href="#8f">8f</a>
            <a href="#1f">top</a>-->
            <a href="javascript:;">2f</a>
            <a href="javascript:;">3f</a>
            <a href="javascript:;">4f</a>
            <a href="javascript:;">5f</a>
            <a href="javascript:;">6f</a>
            <a href="javascript:;">7f</a>
            <a href="javascript:;">8f</a>
            <a href="javascript:;">top</a>
        </div>
        <script src="js/jquery.min.js" type="text/javascript"></script> 
        <script>
            $(window).scroll(function(){
             var s = $(window).scrollTop();
             if(s>510){
                 $("div").show(); 
             }else $("div").hide(); 
            });
            var IMG = $("img").height();
            $("div a").click(function(){
//                alert($(this).index());
                var a=$(this).index();
                if(a<7){
                $("html,body").animate({"scrollTop":(IMG+50)*(a+1)});}
               else{
                     $("html,body").animate({"scrollTop" :0}); 
                }
            });
        </script>
    </body>
</html>
